<script setup xmlns:el-col="http://www.w3.org/1999/html">

import {h, onMounted, onUnmounted, onUpdated, ref} from "vue";
import axios from "axios";
import bg  from '/src/assets/01.webp'
import bg1  from "/src/assets/02.webp"
import bg2  from '/src/assets/03.webp'
import bg3  from '/src/assets/04.webp'
import {ElNotification} from "element-plus";
import {Position} from "@element-plus/icons-vue";
//加载框

const fullscreenLoading = ref(false)
const openoff=ref(false)
//图片地址
 const img=ref([{
  url:bg2,
  name:''
},
  {
    url:bg,
    name:''
  },
  {
    url:bg3,
    name:''
  }
  ,
  {
    url:bg1,
    name:''
  }

])
const news=ref([{
  content:
 " 央视网董事长过彤: 培育媒体新质生产力 赋能网络视听新发展"
},
  {
    content: "焦点访谈：鱼从山中来"
  }
  ,
  {
    content: "\n" +
        "各行各业跑出高质量发展“加速度” 实干前行不断提升居民“幸福指数”"
  }
  ,
  {
    content: "花漾贵州”邀世界共赴春日之约"
  }
  ,
  {
    content: "\n" +
        "击鼓催征拼开局丨向西开放 新疆旅游打开发展新空间"
  }
  ,
  {
    content: "世界互联网大会数字丝路发展论坛将于4月16日在西安举行"
  }
])
const category=ref([]);
const categoryid=ref();


const getall= ()=>{
  axios.get("/allcategory").then(result=>{

    category.value=result.data.data;

  }).catch(err=>{
    return   ElNotification({
      title: '消息',
      message: h('i', { style: 'color: teal' },'数据异常 请联系管理员'),
    })
  })
}
const SparkDesk=ref("")
const Answer=ref("")

//讯飞的接口
const xfee = (question) => {
  //防止二次提交
  openoff.value=true
  //拿到用户的问题
  const sparkask = SparkDesk.value;
  const scorll = document.getElementById('scroll');
  const outputElement2 = document.getElementById('text');

// 创建一个span元素并设置样式为简约颜色和金色边框 用户输入的部分
  const spanElement = document.createElement('span');
  spanElement.style.color = 'black'; // 设置字体颜色为navy，可以根据需要更改颜色
  spanElement.style.width='100%'// 设置边框为2像素宽的金色实线
  const img1 = document.createElement('img');
  img1.src = "https://img2.imgtp.com/2024/05/17/IqoqzFxf.png";
  img1.style.width = "auto";
  img1.style.height = "6%";
  img1.style.alignItems = "left";
  img1.size='small'
  spanElement.appendChild(img1);
  spanElement.appendChild(document.createTextNode( sparkask));


  outputElement2.appendChild(spanElement);

  const hr1 = document.createElement("hr");
  const br1 = document.createElement("br");
  outputElement2.appendChild(hr1);
  outputElement2.appendChild(br1);
  const outputElement1 = document.getElementById('text');
  const img = document.createElement('img');
  img.src = "https://img2.imgtp.com/2024/05/17/Pve1p0zP.png";
  img.style.width = "auto";
  img.style.height = "5%";
  img.style.alignItems = "left";
  outputElement1.appendChild(img);
  scorll.scrollTop = scorll.scrollHeight;
SparkDesk.value=""
  axios.get("/xfee/ask", {params:{
      question:question
    }}).then(result => {
    //拿到结果开启加载
    fullscreenLoading.value = true
   //打开 按钮开关
    setTimeout(()=>{

      fullscreenLoading.value=false
    },500)
if (result.data.code==0){


//拿到回答
  Answer.value = result.data.data;
  const text = Answer.value;
  let index = 0;
  const outputElement = document.getElementById('text');
  const scorll = document.getElementById('scroll');
  function printText() {
    if (index < text.length) {
      scorll.scrollTop = scorll.scrollHeight; // 滚动到底部
      outputElement.append(document.createTextNode(text.charAt(index)));
      index++;
      setTimeout(printText, 50); // 控制打印速度，单位为毫秒
    } else {
      // 文本打印完成
      const elDivider = document.createElement('br');
      outputElement.appendChild(elDivider);
      const hr = document.createElement('hr');
      outputElement.appendChild(hr);
      // 打印完成后再次滚动到底部
    scorll.scrollTop = scorll.scrollHeight;
      openoff.value=false;
    }
  }

  printText();


}

if (result.data.code==1){
  return   ElNotification({
    title: '消息',
    message: h('i', { style: 'color: teal' },result.data.data),
  })
}

  }).catch(error => {
    openoff.value=false
    return   ElNotification({
      title: '消息',
      message: h('i', { style: 'color: teal' },error.message),
    })
  }).finally(()=>{

  });
}
onMounted(()=>{

  getall()


})

</script>

<template>

  <div class="common-layout">
    <el-container>
      <el-main>
<el-row>

  <el-col :span="24">

<el-row>
  <el-col :span="24">
    <el-card>
      <el-row>
        <el-avatar size="small"
            src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
        /><p >欢迎您使用Xfee星火人工智能小助手</p>
        <small>V1.5</small>
      </el-row>
      <el-row>
        <span>
       <p style="font-size: 20px;">亲爱的用户您好，我是Xfee小助手</p>

       <el-text style="font-size: 20px;">我可以陪您写文案，聊天，答疑解惑，计算题等等</el-text>
           <el-text type="primary" style="font-size: 20px;font-family: '幼圆';font-weight: bold">点击下方的按钮快来试试吧~</el-text>


     </span>
        <el-text style="font-size: 20px;">您可以问我:例如：如何写一封表白信？感冒发烧怎么办？100+1100*2=?以及生活学业工作所遇到的各种问题^^</el-text>
      </el-row>

     <el-card  style="height: 300px; ">
        <div style="height: 300px; overflow: scroll; " id="scroll">

          <el-text id="text"   style="justify-items: start;justify-content:start;color: black;font-size: larger;height:300px" >

          </el-text>
        </div>


      </el-card>



    </el-card>
  </el-col>

</el-row>
    <el-card style="">


      <el-input rows="3" show-word-limit="true" maxlength="1024" type="textarea"   v-model="SparkDesk" placeholder="请输入您要咨询的问题" >

      </el-input>
      <el-button style="width: 100%;color: white;border-radius:5%;" icon="search" type="success" @click="xfee(SparkDesk)" v-loading.fullscreen.lock="fullscreenLoading" :disabled="openoff">询问</el-button>

    </el-card>
  </el-col>
</el-row>



      </el-main>
    </el-container>
  </div>

</template>

<style scoped>
.common-layout{
font-family: '微軟正黑體 Light';
  margin-top: 3%;
}
.box{

  justify-items:start;
  justify-content: start;
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}
</style>